<template>
	<view class="el_row_item">
	


		<view class="item_title">
			<span>{{title}}</span>
			<el-tag size="small" type="success">今{{time}}</el-tag>
		</view>
		<view class="item_text">
			<animate-number ref="myNum" class="number" :from="getYesterday" :to="getToday" duration="1000"
				easing="easeOutQuad">
			</animate-number>

			<view class="tip">
				<span style="margin-right: 15px;">{{time=='日'?'昨日':'去年'}}：<animate-number :from="0" :to="getYesterday"
						duration="1000" easing="easeOutQuad">
					</animate-number></span>
				<span>
					{{time}}环比：<animate-number :from="0" :to="huanBi(today, yesterday )" duration="1000"
						easing="easeOutQuad"></animate-number>%
					<block v-if="arror == 1">
						<i class="el-icon-caret-top" style="color: #67C23A"></i>
					</block>
					<block v-if="arror == 2">
						<i class="el-icon-caret-bottom" style="color: #F56C6C"></i>
					</block>
				</span>
			</view>
		</view>
		<view class="item_info">
			<span>{{summary}}</span><span>
				<animate-number :from="0" :to="total" duration="1000" easing="easeOutQuad"></animate-number>{{unit}}
			</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home-top-item",
		props: {
			title: {
				Type: String,
				default: '--'
			},
			today: {
				Type: Number,
				default: 0
			},
			yesterday: {
				Type: Number,
				default: 0
			},
			summary: {
				Type: String,
				default: '--'
			},
			total: {
				Type: Number,
				default: 0
			},
			unit: {
				Type: String,
				default: ''
			},
			time: {
				Type: String,
				default: '日'
			}
		},
		computed: {
			getToday() {
				return this.today
			},
			getYesterday() {
				return this.yesterday
			}
		},
		data() {
			return {
				arror: 0
			}
		},
		methods: {
			//计算环比
			huanBi(t, p) {
				// if (t == 0) return "0"
				if (p == 0) {
					if (t > 0) {
						this.arror = 1
						return "+100"
					} else {
						this.arror = 2
						return "-100"
					}

				}
				let res = Number((t - p) / p * 100).toFixed(1)
				if (res > 0) {
					this.arror = 1
					return "+" + res
				}
				this.arror = 2
				return "" + res
			},
			start() {
				this.$refs.myNum.start()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.el_row_item {
		flex: 1;
		overflow: hidden;
		background: #fff;
		border-radius: 8px;
		margin-right: 20px;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;

		.item_title {
			padding: 14px 16px;
			font-size: 16px;
			color: #666;
			margin-bottom: 12px;
			border-bottom: 1px solid #e8eaec;
			display: flex;
			justify-content: space-between;
		}

		.item_text {
			padding: 0 16px;

			.number {
				padding: 1px 0;
				font-size: 30px;
				color: #444444;
			}

			.tip {
				font-size: 14px;
				color: #666;
				display: flex;
				flex-wrap: wrap;
			}
		}

		.item_info {
			padding: 12px 2px;
			margin: 0 14px;
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			margin-top: 12px;
			border-top: 1px solid #e8eaec;
			color: #666;
			flex-wrap: wrap;

			span {
				// display: block;
			}
		}
	}
</style>
